<template>
  <div class="star">
    <header>
      <span></span>
      <strong>{{ $t("language.Star.name") }}</strong>
      <span @click="$openPage('/kefu')"
        ><img src="@/assets/img/kefu.png" alt=""
      /></span>
    </header>
    <dl>
      <dd
        v-for="(item, index) in starimg"
        @click="$openPage('StarDetail')"
        :key="index"
        :style="{ backgroundColor: !loading ? 'rgb(61, 64, 72)' : '' }"
      >
        <Skeleton :loading="loading">
          <template #ske>
            <div style="width: 100%;">
              <van-skeleton-image style="width: 100%; height: 180px;border-radius: 10px;" />
              <van-skeleton-paragraph
                style="width: 40%; height: 40px; margin-top: 10px"
              />
            </div>
          </template>
          <template #main>
            <img lazy="loading" v-lazy="item.img" alt="" />
            <div class="text">{{ $t(item.lang) }}</div>
          </template>
        </Skeleton>
      </dd>
    </dl>
  </div>
</template>
<script setup lang="ts" name="Star">
import { reactive, nextTick, onMounted, ref } from "vue";
let loading = ref(true);
onMounted(() => {
  nextTick(() => {
    // loading.value = false;
    let time = setInterval(() => {
      loading.value = false;
      clearInterval(time);
    }, 500);
  });
});
const getImg = (url) => {
  return new URL(`../../assets/img/${url}`, import.meta.url).href;
};
let starimg = reactive([
  {
    img: getImg("h1.jpg"),
    lang: "language.Star.title1",
  },
  {
    img: getImg("h2.png"),
    lang: "language.Star.title2",
  },
  {
    img: getImg("h3.jpg"),
    lang: "language.Star.title3",
  },
  {
    img: getImg("h4.jpg"),
    lang: "language.Star.title4",
  },
  {
    img: getImg("h5.jpg"),
    lang: "language.Star.title5",
  },
  {
    img: getImg("h6.jpg"),
    lang: "language.Star.title6",
  },
  {
    img: getImg("h7.jpg"),
    lang: "language.Star.title7",
  },
  {
    img: getImg("h8.jpg"),
    lang: "language.Star.title8",
  },
]);
</script>
<style scoped lang="scss">
.star {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;
    span {
      display: block;
      height: 28px;
      width: 28px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  dl {
    padding: 65px 20px 90px;
    width: 100vw;
    min-height: 100vh;
    height: 100%;
    dd {
      width: 100%;
      border-radius: 20px;
      @include flex(column, flex-start, center);

      height: 230px;
      img {
        width: 100%;
        height: 180px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }
      .text {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: left;
        color: #fff;
        font-size: 16px;
        padding: 0 10px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: rgb(61, 64, 72);
      }
    }
    dd + dd {
      margin-top: 20px;
    }
  }
}
</style>
